<template>
    <div class="refuteRumor-container">
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>健康报备</el-breadcrumb-item>
            <el-breadcrumb-item>疫情辟谣</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card shadow="always">
            <div slot="header">
                <span>谣言列表</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-card class="boxcolor" shadow="never">
                        <h1>确诊者家中的狗检测呈弱阳性？</h1>
                        <h5>香港食卫局长陈肇始强调：虽查到弱阳性，但无证据显示狗会传播新冠病毒给人</h5>
                        <p>
                            据香港文汇网报道，香港渔护署发现一名新冠肺炎确诊患者饲养的宠物狗对病毒测试呈弱阳性反应。香港食物及卫生局长陈肇始28日强调，无证据显示狗会传播新冠病毒给人。她呼吁养宠物的市民注意个人卫生。
                            陈肇始表示，这只狗会接受兽医的医学监察，并抽取样本化验，待测试结果呈阴性才会发还。
                        </p>
                    </el-card>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-card class="boxcolor" shadow="never">
                        <h1>确诊者家中的狗检测呈弱阳性？</h1>
                        <h5>香港食卫局长陈肇始强调：虽查到弱阳性，但无证据显示狗会传播新冠病毒给人</h5>
                        <p>
                            中国-世界卫生组织新冠肺炎联合专家考察组24日在北京举行发布会。考察组中方组长梁万年：通过对不同地点分离出的104株新冠病毒株进行全基因组测序，证实同源性达99.9%，提示病毒尚未发生明显变异。
                        </p>
                    </el-card>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-card class="boxcolor" shadow="never">
                        <h1>确诊者家中的狗检测呈弱阳性？</h1>
                        <h5>香港食卫局长陈肇始强调：虽查到弱阳性，但无证据显示狗会传播新冠病毒给人</h5>
                        <p>
                            据香港文汇网报道，香港渔护署发现一名新冠肺炎确诊患者饲养的宠物狗对病毒测试呈弱阳性反应。香港食物及卫生局长陈肇始28日强调，无证据显示狗会传播新冠病毒给人。她呼吁养宠物的市民注意个人卫生。
                            陈肇始表示，这只狗会接受兽医的医学监察，并抽取样本化验，待测试结果呈阴性才会发还。
                        </p>
                    </el-card>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-card class="boxcolor" shadow="never">
                        <h1>确诊者家中的狗检测呈弱阳性？</h1>
                        <h5>"香港食卫局长陈肇始强调：虽查到弱阳性，但无证据显示狗会传播新冠病毒给人"</h5>
                        <p>
                            据香港文汇网报道，香港渔护署发现一名新冠肺炎确诊患者饲养的宠物狗对病毒测试呈弱阳性反应。香港食物及卫生局长陈肇始28日强调，无证据显示狗会传播新冠病毒给人。她呼吁养宠物的市民注意个人卫生。
                            陈肇始表示，这只狗会接受兽医的医学监察，并抽取样本化验，待测试结果呈阴性才会发还。
                        </p>
                    </el-card>
                </el-col>
            </el-row>
            <el-pagination
                style="margin: 10px 0; float: right"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryMap.pageNum"
                :page-size="queryMap.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
import jsonp from "jsonp";
export default {
    name: "Refuterumor",

    data() {
        return {
            total: 0,
            queryMap: { pageNum: 1, pageSize: 4, status: 0 }, //搜索数据
        };
    },

    mounted() {
        this.getTableData();
    },

    methods: {
        // 获取数据
        getTableData() {
            // "https://lab.isaaclin.cn/nCoV/api/rumors?page=" + 1 + "&num=" + 4 + "&rumorType=" + 1, //接口
            jsonp("https://lab.isaaclin.cn/nCoV/api/rumors", { page: 1, num: 4, rumorType: 1 }, (err, data) => {
                if (!err) {
                    resolve(data);
                } else {
                    reject(err);
                }
            });
        },

        // 改变页码
        handleSizeChange(newSize) {
            this.queryMap.pageSize = newSize;
            this.getTableData();
        },
        // 点击分页
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            this.getTableData();
        },
    },
};
</script>

<style lang="less" scoped>
.boxcolor {
    background-color: rgba(184, 214, 241, 0.933);
    margin-bottom: 20px;
    height: 210px;
    h1 {
        margin: 0;
    }
    h5 {
        margin: 10px 0;
        color: #a8a8a8;
    }
    p {
        text-indent: 2em; //首行缩进
        word-break: break-all; //换行
        text-overflow: ellipsis; //用省略号代替
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }
}
</style>
